<template>
    <el-button>按钮</el-button>
    <el-button type="primary" disabled>Primary</el-button>
    <el-button type="success" link>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" loading>Danger</el-button>

    <!-- 图标按钮 -->
    <el-button type="primary" :icon="Edit" />


    <!-- 按钮组 -->
    <el-button-group class="ml-4">
        <el-button type="primary" :icon="Edit" />
        <el-button type="primary" :icon="Share" />
        <el-button type="primary" :icon="Delete" />
    </el-button-group>


    <!-- 图标组件 -->
    <el-icon size="32" color="#f00">
        <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <!-- <Edit /> -->

    <Share style="width: 1em; height: 1em; margin-right: 8px" />


    <el-icon>
        <Delete />
    </el-icon>


    <h1>{{ text }}</h1>
    <el-input v-model="text" placeholder="Please input" clearable @clear="clearInput" />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const text = ref("")

const clearInput = () => {
    console.log("清除输入框")
}
</script>

<style scoped lang="scss"></style>